import { defineStore } from "pinia";
import { ref } from "vue";
import AppConfig from "@/config";
import { MenuTypeEnum } from "@/constants/enums/menuEnum";

const { defaultMenuWidth } = AppConfig.systemSetting;

export const useMenuStore = defineStore("menuStore", () => {
  /** 菜单类型、导航类型 */
  const menuType = ref(MenuTypeEnum.Vertical);
  /** 菜单展开宽度 */
  const menuOpenWidth = ref(defaultMenuWidth);
  /** 菜单是否展开 */
  const menuOpen = ref(true);
  /** 双菜单是否显示文本 */
  const dbMenuShowText = ref(false);
  /** 菜单宽度 */
  const menuWidth = ref("");
  /** 菜单列表 */
  const menuList = ref([]);

  /** 是否显示菜单收缩按钮--未来可能迁移至界面显示设置 */
  const showMenuButton = ref(true);

  /**
   * 获取菜单展开宽度
   */
  const getMenuOpenWidth = computed((): string => {
    return menuOpenWidth.value + "px" || defaultMenuWidth + "px";
  });

  /**
   * 设置菜单宽度
   * @param width 菜单宽度值
   */
  function setMenuWidth(width: string) {
    menuWidth.value = width;
  }

  /**
   * 切换菜单布局
   * @param type 菜单类型
   */
  function switchMenuLayouts(type: MenuTypeEnum) {
    menuType.value = type;
  }

  /**
   * 设置菜单展开宽度
   * @param width 宽度值
   */
  function setMenuOpenWidth(width: number) {
    menuOpenWidth.value = width;
  }

  /**
   * 切换菜单按钮显示
   */
  const setMenuButton = () => {
    showMenuButton.value = !showMenuButton.value;
  };

  /**
   * 设置菜单展开状态
   * @param isOpen 是否展开
   */
  const setMenuOpen = (isOpen: boolean) => {
    menuOpen.value = isOpen;
  };

  /**
   * 设置双列菜单是否显示文本信息
   * @param isShow 展示信息
   */
  const setDbMenuShowText = (isShow: boolean) => {
    dbMenuShowText.value = isShow;
  };

  return {
    menuType,
    menuWidth,
    menuOpen,
    dbMenuShowText,
    setMenuWidth,
    showMenuButton,
    getMenuOpenWidth,
    setMenuOpenWidth,
    switchMenuLayouts,
    setMenuOpen,
    setMenuButton,
    setDbMenuShowText,
    menuList,
  };
});
